import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

/**
 * 递归路径
 * @type {*[]}
 */

const PEEPS = [
    { id: 0, name: "Michelle", friends: [1, 2, 3] },
    { id: 1, name: "Sean", friends: [0, 3] },
    { id: 2, name: "Kim", friends: [0, 1, 3] },
    { id: 3, name: "David", friends: [1, 2] }
];

function find(id) {
    console.log("查找 执行了几次"+id);
    const find = PEEPS.find(p => {
        return p.id === id;
    });
    console.log("查找到的数据");
    console.log(find);
    return find;
}

function RecursiveExample() {
    return (
        <Router>
            <Person match={{ params: { id: 0 }, url: "" }} />
        </Router>
    );
}

function Person({ match }) {

    let person = find(match.params.id);
    console.log("这是一次尝试");
    console.log(match.params.id);
    console.log(person);

    return (
        <div>
            <h3>
                {person.name}
                ’s Friends
            </h3>
            <ul>
                {person.friends.map(id => (
                    <li key={id}>
                        <Link to={`${match.url}/${id}`}>{find(id).name}</Link>
                    </li>
                ))}
            </ul>
            <Route path={`${match.url}/:id`} component={Person} />
        </div>
    );
}

export default RecursiveExample;
